<template>
  <section class="todoapp">
    <ToduHeader @add="addTodo"></ToduHeader>
    <ToduMain :list="list" @del="handDel"></ToduMain>
    <ToduFooter></ToduFooter>
  </section>
</template>

<script>
import ToduFooter from "@/components/ToduFooter.vue";
import ToduMain from "@/components/ToduMain.vue";
import ToduHeader from "@/components/ToduHeader.vue";
export default {
  data() {
    return {
      list: [
        // isDone: 是否完成
        { id: 12, name: "吃饭", isDone: false },
        { id: 14, name: "听歌", isDone: true },
        { id: 23, name: "洗澡", isDone: true },
        { id: 34, name: "睡觉", isDone: false },
        { id: 35, name: "游戏", isDone: false },
      ],
    };
  },
  components: {
    ToduFooter,
    ToduMain,
    ToduHeader,
  },
  methods: {
    handDel(id) {
      this.list = this.list.filter((item) => item.id != id);
    },
    addTodo(todo) {
      // 数组.push向数组结尾插入数据   数组.unshift 向数组开头插入数据
      //接收到头部组件数据后,添加数据
      this.list.push({
        id: Date.now(),
        name: todo,
        isDone: false,
      });
    },
  },
};
</script>

<style></style>
